<template>
  <div class="home">
    <div class="href">
      <a href="http://gongyi.people.com.cn/big5/n1/2020/1216/c434248-31967778.html">
      抗击疫情典型案例
      </a>
    </div>
  
    <!--轮播图开始-->
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="item in arrPhoto" :key="item">
        <img width="100%" height="100%" style="border-radius:68px" :src="item" alt="">
      </el-carousel-item>
    </el-carousel>
    <!--轮播图结束-->
    <!--拓展模块开始-->
    <div class="pic">
      <div class="fit">
        <img src="./1.jpg" alt="" style="height:300px;border-radius:200px">
      </div>

      <div class="personthing">
        <div class="zhongnanshan">
        <a href="https://baike.baidu.com/item/%E9%92%9F%E5%8D%97%E5%B1%B1/653914?fr=aladdin" target="_blank">
          钟南山院士的简介
        </a> 
        </div>
        <div class="ontime">
          <a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner" target="_blank">
            疫情实时数据查询
          </a>
        </div>
        <div class="hero">
          <a href="https://www.gdzz114.com/zx_zzjx/24127.html" target="_blank">
          英雄人物事迹介绍
          </a>
        </div>
        
      </div>  
      <div class="fit1" id="main">

      </div>
    </div>
    <!--拓展模块结束-->
  </div>
</template>
<script>
import * as echarts from 'echarts';
import axios from '@/utils/axios'
export default {
  data(){
    return {
      arrPhoto:[]
    }
  },
  methods:{
    //查询所有轮播图信息
    findAllPhoto(){
      //与后台交互的代码
      axios.get('/carousel/findAllCarousel').then((res)=>{
        console.log(res.data,'---------')
        if(res.data.status == 200){
          this.arrPhoto = res.data.data
        }else {
          this.$message({type:'error',message:res.data.message})
        }
      }).catch((error)=>{
        this.$message({type:'error',message:error})
      })
    },
    init_chart(){
      var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'darkblue');
var option;

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
       
        textStyle:{
          color:'#0000FF',
          fontSize:14
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['现有确诊', '累计确诊', '无症状', '境外输入', '累计治愈', '累计死亡', '现有重症'],
            axisTick: {
                alignWithLabel: true
            },
            axisLine:{
            show:true,
            lineStyle:{
                color:'#fff'
            }
        }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLine:{
            show:true,
            lineStyle:{
                color:'#fff'
            }
        }
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [3063, 119614, 444, 6952, 110939, 5612, 12]
        }
    ]
};

option && myChart.setOption(option);
    }
  },
  //实例创建完成的时候，可以访问我们data里面的值
  created(){
    this.findAllPhoto()
  },
  mounted(){
    this.init_chart()
  }
}
</script>
<style>
.fit1{
  height: 300px;
}
.pic .personthing {
  flex: 1;
}
  .pic{
    display: flex;
    height: 200px;
    text-align: center;
  }
  .pic .fit{
    flex: 1;
  }
  .pic .fit1{
    flex: 1;
  }
  .pic .hero {
    font-size: 30px;
    color: cornsilk;
    margin: 100px 0 0 0;
  }
  .pic .ontime{
    font-size: 30px;
    color: cornsilk;
    margin-top: 100px;
  }
  .pic .ontime:hover{
    cursor: pointer;
    color: red;
  }
  .pic .zhongnanshan {
    flex: 1;
    font-size: 30px;
    color: cornsilk;
  }
  .pic .hero:hover{
    color: crimson;
    cursor: pointer;
  }
  .pic .zhongnanshan:hover{
    color: red;
    cursor: pointer;
  }

  .href{
    text-align: center;
    margin: 5px 0 5px 0;
    color: azure;
    flex: 1;
  }
  .href:hover{
    cursor: pointer;
    color:brown;
  }


</style>

